<script setup>
import {watch} from "vue";
import {useMask} from "./hooks/useMask.js";
import {DFT_ICONS} from "@jzl/icons";
import {useMaskHover} from "./hooks/useMaskHover.js";

const props = defineProps({
  // item: Object,
  // isH5: Boolean,
  // pageType: [Number, String],
  // items: Object,
  currentItem: Object,
  currentElCode: String,
  hoverElCode: String,
  currentNode: Object,
  container: Object
})

const {
  masks,
  onResizeStart,
  onResizing,
  onResizeStop,
  onDragStart,
  onDragging,
  onDragStop
} = useMask(props)

useMaskHover(props)

</script>
<template>
  <template
    v-for="(mask, index) in masks"
    :key="mask.code"
  >
    <VueDraggableResizable
      class="builder-mask-drag-resize"
      v-show="mask.show"
      drag-handle=".builder-mask-drag"
      :w="mask.width"
      :h="mask.height"
      :x="mask.left"
      :y="mask.top"
      :parent="true"
      :handles="[ 'br' ]"
      :draggable="mask.position !== 'static' && mask.isRoot"
      :onResizeStart="onResizeStart"
      @resizing="onResizing"
      @resizeStop="onResizeStop"
      :onDragStart="onDragStart"
      @dragging="onDragging"
      @dragStop="onDragStop"
    >
      <JIcon
        v-if="mask.position !== 'static' && mask.isRoot"
        :icon="DFT_ICONS.dragMove"
        class="builder-mask-drag"
      />
    </VueDraggableResizable>
  </template>
</template>
